.htmlEditor {
	ul.toolbar {
		border: 1px solid #C5C5C5;
		border-radius: 4px 4px 0 0;
		border-bottom: 0;
		background-color: #E8E7E4;
		width: 100%;
		height: 30px;
		margin: 0;
		box-sizing: border-box;
		padding: 3px 4px;
		& > li {
			list-style: none;
			float: left;
			cursor: pointer;
			span {
				border: 1px solid transparent;
				width: 25px;
				height: 20px;
				display: block;
				background-image: url('@{assetFilePath}/common/images/htmlEditor/css_sprites.png');
				&:hover {
					border-right-color: #aaa;
					border-bottom-color: #aaa;
					border-top-color: #fff;
					border-left-color: #fff;
				}

				&:active {
					border-right-color: #f3f8fc;
					border-bottom-color: #f3f8fc;
					border-top-color: #ccc;
					border-left-color: #ccc;
				}
			}

			ul li {
				padding: 3px;
				cursor: pointer;
				&:hover {
					background-color: lightgray;
				}
			}

			.bg-4 {

				background-position: -10px -10px;
			}

			.bg-5 {
				background-position:-55px -10px;
			}

			.bg-6 {
				background-position: -10px -90px;
			}

			.bg-7 {
				background-position:  -50px -90px;
			}

			.bg-8 {
				background-position:  -90px -90px;
			}

			.bg-9 {
				background-position:   -141px -10px;
			}

			.bg-10 {
				background-position:  -141px -50px;
			}

			.bg-11 {
				background-position: -141px -90px;
			}

			.bg-12 {
				background-position:  -10px -130px;
			}

			.bg-13 {
				background-position:  -50px -130px;
			}

			.bg-14 {
				background-position:  -90px -130px;
			}

			.bg-15 {
				background-position:  -130px -130px;
			}

			.bg-16 {
				background-position:  -54px -50px;
			}

			.bg-17 {
				background-position:  -10px -50px;
			}

			.bg-18 {
				background-position:  -100px -10px;
			}

			.bg-19 {
				background-position:  -100px -50px;
			}
			
			.noBg{
				background-image:none;
			}
		}
	}

	.editorBody {
		iframe , textarea {
			border: 1px solid #C5C5C5;
			border-radius: 0 0 4px 4px;
			border-top-width: 0;
			box-sizing: border-box;
			background-color: white;
			height: 283px;
			width: 100%;
		}

		textarea {
			resize: none;
		}
	}

	.colorPicker {
		width: 210px;
		border: 1px solid #D3D3D3;
		position: absolute;
		table {
			border-collapse: collapse;
		}

		.colorhead {
			height: 23px;
			line-height: 23px;
			font-weight: bold;
			width: 100%;
		}

		.colortitle {
			margin-left: 6px;
			font-size: 12px;
		}

		.colorbody {
		}

		.colorpanel td {
			border: 1px solid #000;
			height: 10px;
			width: 10px;
			overflow: hidden;
			font-size: 1px;
			cursor: pointer;
		}
	}
}

// 登录面板 和忘记密码
.dorpdown {
	position: relative;
	&:hover .fontfamilyChoser , .fontfamilyChoser:hover , &:hover .fontsizeChoser , .fontsizeChoser:hover , &:hover .colorPicker , .colorPicker:hover {
		display: block;
	}

	& > div {
		display: none;
		position: absolute;
		top: 22px;
		left: 0;
		background-color: #f5f5f5;
		border: 1px solid lightgray;
		border-top: 0;
		padding: 5px;
		width: 230px;
	}

	.fontsizeChoser {
		top: inherit;
		right: 0;
	}
}

// 字体演示
.fontfamilyChoser , .fontsizeChoser {
	a {
		padding-right: 2px;
		display: block;
		padding-left: 2px;
		padding-bottom: 2px;
		color: #000000;
		line-height: 16px;
		padding-top: 2px;
		text-decoration: none;
		&:hover {
			background: #e5e5e5
		}
	}
}

